<!DOCTYPE html>
<html>

	<head>
		<!-- 声明文档使用的字符编码 -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<!-- 为移动设备添加 viewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
		<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
		<meta name="HandheldFriendly" content="true">
		<!-- 优先使用 IE 最新版本和 Chrome -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>黑图视界</title>
		<meta name="keywords" content="黑图视界">
		<meta name="description" content="黑图视界">
		<script type="text/javascript" src="../js/setFontSize.js"></script>
		<link rel="stylesheet" href="../css/swiper.min.css" />
		<link rel="stylesheet" href="../css/main.css" />
	</head>

	<body>
		<div id="app">
			<main class="pab30">
				<section class="ticketDe myYudingDe picBg mbt30">
					<div class="container">
						<div class="whiteBg mbt30 radius20 pad30">
<!--					{{orders.ticket.ticketType}}		-->
							<div class="way">取票方式：电子票</div>
							<a class="ewm clearfix" @click="goToQr">
								电子票码：{{orders.hexhash}}
								<div class="arrow"></div>
								<div class="ewmIcon"></div>
							</a>
						</div>
						<div class="whiteBg mbt30 radius20 pad30">
							<a class="commonTitle" href="javascript:void(0)" @click="gotoA(orders.activity.id)"><i class="icon"></i>活动名称：{{orders.activity.activityname}}<span class="arrow"></span></a>
							<div class="infos">
								<div class="item clearfix">
									<div class="name">票名：</div>
									<div class="txt">{{orders.activity.activityname}}</div>
								</div>
								<div class="item clearfix">
									<div class="name">价格：</div>
									<div class="txt">¥{{orders.activity.price}}</div>
								</div>
								<div class="item clearfix">
									<div class="name">使用日期：</div>
									<div class="txt">{{orders.booktime}}</div>
								</div>
								<div class="tuipiao" id="tuipiao" @click="T()" v-show="orders.status==0">取消预定</div>
							</div>
							<div class="item clearfix">
								<div class="name">状态：</div>
								<div class="txt txt1" v-show="orders.status==0">未使用</div>
								<div class="txt txt2" v-show="orders.status==1">已退票</div>
								<div class="txt txt3" v-show="orders.status==2">已核销</div>
							</div>
						</div>
						<div class="whiteBg mbt30 radius20 pad30">
							<h3 class="commonTitle"><i class="icon"></i>订单信息</h3>
							<div class="infos">
								<div class="item clearfix">
									<div class="name">订单号：</div>
									<div class="txt">{{orders.id}}</div>
								</div>
								<div class="item clearfix">
									<div class="name">购买时间：</div>
									<div class="txt">{{orders.createtime}}</div>
								</div>
								<div class="item clearfix">
									<div class="name">预订时间：</div>
									<div class="txt">{{orders.booktime}}</div>
								</div>
								<div class="item clearfix">
									<div class="name">电话号码：</div>
									<div class="txt">{{user.phonenum}}</div>
								</div>
							</div>
						</div>
						<div class="whiteBg radius20 mbt30 pad30">
							<h3 class="commonTitle"><i class="icon"></i>预订内容</h3>
							<div class="commontext">
								{{orders.activity.introduce}}
							</div>
						</div>
						<div class="whiteBg radius20 pad30">
							<h3 class="commonTitle"><i class="icon"></i>温馨提示</h3>
							<div class="commontext">
								{{orders.activity.warning}}
							</div>
						</div>
					</div>
				</section>
				<section class="tuipiaoTc">
					<div class="mask"></div>
					<div class="flexBox">
						<div class="box">
							<div class="title">取消预定</div>
							<form action="" method="" class="tuipiaoForm">
								<select class="formSelect mbt30" name="reson">
									<option value="1">前两天无理由退货</option>
									<option value="2">老子不需要了</option>
									<option value="3">我老花眼了</option>
									<option value="4">我买错了</option>
									<option value="5">再见</option>
								</select>
								<textarea class="formText" placeholder="备注" name="beizhu"></textarea>
								<button type="button" class="subBtn" @click="Tui(orders.bookerid)">提交申请</button>
							</form>
							<div class="close" id="tpClose" @click="CloseIt"></div>
						</div>
					</div>
				</section>

			</main>
		</div>

		<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="../js/swiper.min.js"></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script type="text/javascript" src="../js/main.js"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
		<script src="../js/getParameter.js"></script>
		<script>
			let app3=new Vue({
				el:"#app",
				data:{
					orders:{},
					user:{},
				},
				methods:{
					Tui(id){
						const _this=this;
						axios.get("/activity/tui",{params:{id:_this.orders.objid,time:_this.orders.booktime}}).then(function (response) {
							if (!response.data) {
								layer.msg("退票失败，场馆开始前8小时以后拒绝退票，如有疑惑，请联系管理员！");
							} else {
								axios.get("/order/updateById",
										{params: {id: _this.orders.id}})
										.then(function (response) {
											location.href = "/userclient/myYuding.html?id=" + id
										})
							}
						})
					},
					T(){
						console.log(1);
						$(".tuipiaoTc").css({"display":"block"})
					},
					CloseIt(){
						console.log(2);
						$(".tuipiaoTc").css({"display":"none"})
					},
					goToQr(){
						location.href = "/userclient/qcode.html?oid="+this.orders.id
					},
					gotoA(id){
						location.href="/userclient/yudingDe.html?id="+id;
					}
				},
				created(){
					const _this=this;
					let oid =getParameter("id");
					axios.get("/user/findLogin")
						.then(function (response) {
							_this.user=response.data;
						})

					axios.get("/order/findOrderById",
							{params:{id:oid}})
							.then(function (response) {
								_this.orders=response.data;

							});

				}
			})
		</script>
	</body>

</html>